<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
</head>

<body>

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
        <legend>创建直播间</legend>
    </fieldset>
    <form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">主播昵称</label>
            <div class="layui-input-inline">
                <input type="text" name="nickname" lay-verify="required" placeholder="请输入" autocomplete="off"
                    class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">直播间名称</label>
            <div class="layui-input-inline">
                <input type="text" name="uname" lay-verify="required" placeholder="请输入" autocomplete="off"
                    class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">所属分类</label>
            <div class="layui-input-inline">
                <select id="selectBox" name="cid" lay-filter="select" lay-verify="required">
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <button class="layui-btn" lay-submit="" lay-filter="demo">创建</button>
        </div>
    </form>

    <script src="../layui/layui.js" charset="utf-8"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
    <script>
        layui.use(['form', 'layedit', 'laydate', 'jquery'], function () {
            var form = layui.form
                , layer = layui.layer
                , layedit = layui.layedit
                , $ = layui.jquery
                , laydate = layui.laydate;

            // 动态生成分类下拉菜单
            $.ajax({
                url: 'http://localhost:8080/bb/category',
                method: 'GET',
                data: {},
                success: res => {
                    console.log(res)
                    var option = "<option value='' selected>请选择分类</option>";
                    if (res.code == 200) {
                        var str = "";
                        for(i=0;i<res.data.length;i++){
                            option += "<option value='"+res.data[i].id+"'>"+res.data[i].cname+"</option>";
                        }
                        $("#selectBox").html(option)
                    }
                    form.render('select');
                },
            })

            //监听提交
            form.on('submit(demo)', function (data) {
                $.ajax({
                    url: 'http://localhost:8080/bb/anchor',
                    method: 'POST',
                    data: {
                        "nickname": data.field.nickname,
                        "uname": data.field.uname,
                        "cid": data.field.cid
                    },
                    success: res => {
                        console.log(res)
                        if (res.code == 200) {
                            layer.alert(JSON.stringify(data.field), {
                                title: '创建成功'
                            })
                            parent.window.location.href = '../index.html'
                        } else if (res.code == 500) {
                            layer.msg('创建失败，请稍后重试')
                        }
                    },
                    error: err => {
                        console.log(err)
                        layer.msg('创建失败，请稍后重试')
                    }
                })
                return false;
            });

            //表单取值
            layui.$('#LAY-component-form-getval').on('click', function () {
                var data = form.val('example');
                alert(JSON.stringify(data));
            });

        });
    </script>

</body>

</html>